<!--51油封和油泵损失-->
<template>
  <div class="all">
    <a-row class="all-row">
      <a-col span="13" class="left">
        <div class="left-top">油封损失</div>
        <div class="left-middle">
          <div class="left-middle-top">输入参数</div>
          <div class="left-middle-btn">
            <div class="left-middle-left">
              <div class="tool1">
                <ul class="left-left-font">
                  <li>油封轴转速(r/min)</li>
                  <li>油封轴直径(mm)</li>
                  <li>油封类型</li>
                </ul>
              </div>
            </div>
            <div class="left-middle-right">
              <div class="tool2">
                <ul class="left-rigth-input">
                  <li><input v-model="form.x4_c3" /></li>
                  <li><input v-model="form.x4_c4" /></li>
                  <li>
                    <select v-model="form.x4_c5">
                      <option value="1">丁晴橡胶</option>
                      <option value="2">氟橡胶</option>
                    </select>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!--        <div class="button-left">-->
        <!--          <button class="button-left-1" @click="tclick1">计算</button>-->
        <!--        </div>-->
        <div class="left-btn">
          <div class="left-btn-top">输出参数</div>
          <div class="left-btn-mid">
            <label class="left-text">机械泵功率损失(KW)</label>
            <label>{{ dataSource.x4_c6 }}</label>
          </div>
          <div class="left-btn-btn">
            <label class="left-text-2">电动泵功率损失(KW)</label>
            <label>{{ dataSource.x4_c7 }}</label>
          </div>
        </div>
      </a-col>
      <a-col span="1"></a-col>
      <a-col span="10" class="right">
        <div class="right-top">油泵损失</div>
        <div class="right-mid">
          <div class="right-mid-top">输入参数</div>
          <div class="right-mid-btm">
            <div class="right-mid-left">
              <div class="tool3">
                <ul class="right-left-font">
                  <li>机械泵供油流量(L/min)</li>
                  <li>机械泵供油压力(MPa)</li>
                  <li>机械泵效率</li>
                  <li>电动泵消耗功率(KW)</li>
                  <li>电动机效率</li>
                  <li>电动泵效率</li>
                </ul>
              </div>
            </div>
            <div class="right-mid-right">
              <div class="tool4">
                <ul class="right-rigth-input">
                  <li><input v-model="form.x4_c9" /></li>
                  <li><input v-model="form.x4_c10" /></li>
                  <li><input v-model="form.x4_c11" /></li>
                  <li><input v-model="form.x4_c14" /></li>
                  <li><input v-model="form.x4_c15" /></li>
                  <li><input v-model="form.x4_c16" /></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="right-bon">
          <button class="bon-right" @click="tclick">计算</button>
        </div>
        <div class="right-btn">
          <div class="right-btn-top">输出参数</div>
          <div class="right-btn-mid">
            <label class="right-text">机械泵功率损失(KW)</label>
            <label>{{ dataSource.x4_c12 }}</label>
          </div>
          <div class="right-btn-btn">
            <label class="right-text-2">电动泵功率损失(KW)</label>
            <label>{{ dataSource.x4_c17 }}</label>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {namelubricate} from "@/api/file";

export default {
  created () {
    document.title = '油封和油泵损失' //模块中文名
  },
  name: "lubricate_youfengandyoubeng",
  data() {
    return {
      form:{
        x4_c3: 15,
        x4_c4: 830,
        x4_c5: 1,
        x4_c9: 94.5,
        x4_c10: 0.3,
        x4_c11: 0.9,
        x4_c14: 2.5,
        x4_c15: 0.85,
        x4_c16: 0.9
      },
      // dataSource1: {
      //   x4_c6: "static text",
      //   x4_c7: "static text"
      // },
      // dataSource2: {
      //   x4_c12: "static text",
      //   x4_c17: "static text"
      // },
      dataSource:{
        x4_c6: "static text",
        x4_c7: "static text",
        x4_c12: "static text",
        x4_c17: "static text"
      }
    };
  },
  methods: {
    // tclick1() {
    //   namelubricate(this.form)
    //     .then(res => {
    //       console.log(res);
    //       if (res.code === 200) {
    //         console.log(res.data);
    //         this.dataSource1 = res.data.a;
    //       }
    //     })
    //     .catch(error => {
    //       console.log(error);
    //     });
    // },
    // tclick2() {
    //   namelubricate(this.form)
    //     .then(res => {
    //       console.log(res);
    //       if (res.code === 200) {
    //         console.log(res.data);
    //         this.dataSource2 = res.data.a;
    //       }
    //     })
    //     .catch(error => {
    //       console.log(error);
    //     });
    // },
    tclick() {
      console.log(this.form)
      namelubricate(this.form)
          .then(res => {
            console.log(res);
            // if (res.code === 200) {
            this.dataSource.x4_c6= res[0];
            this.dataSource.x4_c7=res[1];
            this.dataSource.x4_c12=res[2];
            this.dataSource.x4_c17=res[3];
            // }
          })
          .catch(error => {
            console.log(error);
          });
    }
  }
};
</script>

<style scoped>
.all {
  width: 100%;
  height: 100%;
}
input {
  text-align: center;
}
.all-row {
  width: 100%;
  height: 100%;
}
.left {
  height: 100%;
  box-shadow: 0px 2px 8px rgb(213, 213, 213);
}
.left-top {
  border-color: #797979;
  width: 100%;
  height: 4%;
  background-color: #eeeeee;
}
.left-middle {
  margin-left: 2%;
  width: 96%;
  height: 53%;
  box-shadow: 0px 2px 8px rgb(213, 213, 213);
}
.left-middle-top {
  border-color: #797979;
  width: 100%;
  height: 6%;
  background-color: #eeeeee;
}
.left-middle-btn {
  width: 100%;
  height: 94%;
  position: relative;
}
.left-middle-left {
  position: absolute;
  left: 0%;
  height: 100%;
  width: 50%;
}
.tool1 {
  width: 100%;
  height: 100%;
  position: relative;
}
.left select {
  width: 100%;
  height: 100%;
}
.left-left-font {
  position: absolute;
  top: 20%;
  right: 5%;
}
.left-left-font li {
  text-align: right;
  margin-top: 30px;
}
.left-rigth-input {
  position: absolute;
  top: 20%;
  left: 5%;
}
.left-rigth-input li {
  margin-top: 27px;
}
.left-middle-right {
  position: absolute;
  right: 0%;
  height: 100%;
  width: 50%;
}
.button-left {
  margin-left: 2%;
  width: 96%;
  height: 8%;
}
/*.button-left-1 {*/
/*  margin-left: 60%;*/
/*  margin-top: 2%;*/
/*  width: 10%;*/
/*  height: 50%;*/
/*  background-color: #16d585;*/
/*  color: #fff;*/
/*}*/
.left-btn {
  margin-left: 2%;
  width: 96%;
  height: 35%;
  box-shadow: 0px 2px 8px rgb(213, 213, 213);
}
.left-btn-top {
  width: 100%;
  height: 12%;
  background-color: #eeeeee;
  border-color: #797979;
}
.left-btn-mid {
  width: 100%;
  height: 40%;
  position: relative;
}
.left-text {
  position: absolute;
  left: 35%;
}
.left-btn-mid label {
  position: absolute;
  top: 30%;
  right: 35%;
}
.left-btn-btn {
  width: 100%;
  height: 48%;
  position: relative;
}
.left-text-2 {
  position: absolute;
  left: 35%;
}
.left-btn-btn label {
  position: absolute;
  top: 0%;
  right: 35%;
}
.right {
  height: 100%;
  box-shadow: 0px 2px 8px rgb(213, 213, 213);
}
.right-top {
  height: 4%;
  width: 100%;
  border-color: #797979;
  background-color: #eeeeee;
}
.right-mid {
  width: 96%;
  height: 53%;
  box-shadow: 0px 2px 8px rgb(213, 213, 213);
  margin-left: 2%;
}
.right-mid-top {
  border-color: #797979;
  width: 100%;
  height: 6%;
  background-color: #eeeeee;
}
.right-mid-btm {
  width: 100%;
  height: 94%;
  position: relative;
}
.right-mid-left {
  position: absolute;
  left: 0%;
  height: 100%;
  width: 50%;
}
.tool3 {
  width: 100%;
  height: 100%;
  position: relative;
}
.right-left-font {
  position: absolute;
  height: 100%;
  width: 100%;
  right: 5%;
}
.right-left-font li {
  text-align: right;
  height: 12%;
  width: 90%;
}
.right-mid-right {
  position: absolute;
  right: 0%;
  height: 100%;
  width: 50%;
}
.right-rigth-input {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 5%;
}
.right-rigth-input li {
  height: 12%;
}
.right-bon {
  margin-left: 2%;
  width: 96%;
  height: 8%;
}
.bon-right {
  margin-left: 60%;
  margin-top: 2%;
  width: 20%;
  height: 50%;
  background-color: #16d585;
  color: #fff;
}
.right-btn {
  margin-left: 2%;
  width: 96%;
  height: 35%;
  box-shadow: 0px 2px 8px rgb(213, 213, 213);
}
.right-btn-top {
  width: 100%;
  height: 12%;
  background-color: #eeeeee;
  border-color: #797979;
}
.right-btn-mid {
  width: 100%;
  height: 40%;
  position: relative;
}
.right-text {
  position: absolute;
  left: 22%;
}
.right-btn-mid label {
  position: absolute;
  top: 30%;
  right: 40%;
}
.right-btn-btn {
  width: 100%;
  height: 48%;
  position: relative;
}
.right-text-2 {
  position: absolute;
  left: 22%;
}
.right-btn-btn label {
  position: absolute;
  top: 0%;
  right: 40%;
}
</style>
